<template>
  <div class="auto-code">
    <plumb-flow
      @update="saveprocess"
      @node-click="nodeclick"
      :edges="flowItem.edges"
      :nodes="flowItem.nodes"
    />
  </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent } from "vue";
import {} from "@ant-design/icons-vue";
import PlumbFlow from "@/components/plumb-flow.vue";
import * as D3 from "d3";
import * as utils from "@/utils/index.ts";

export default defineComponent({
  components: {
    PlumbFlow,
  },
  props: {
    tableOptions: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      loading: false,
      nodesData: {
        x1: {
          type: 3, //UI类型, 1:列表 2:详情 3:表单 4:按钮
          table: "buy_apply",
          fields: [
            {
              label: "申请人",
              name: "applyer",
            },
            {
              label: "购买物品",
              name: "object",
            },
            {
              label: "数量",
              name: "amount"
            },
            {
              label: "价格",
              name: "price"
            },
          ],
        },
        x2: {
          type: 1,
          table: "buy_apply",
          fields: [
            {
              label: "申请人",
              name: "applyer",
            },
            {
              label: "购买物品",
              name: "object",
            },
            {
              label: "数量",
              name: "amount",
            },
            {
              label: "价格",
              name: "price",
            },
          ],
        },
        x3: {
         type: 4,
        }
      },
      flowItem: {
        role: ["user", "admin"],
        edges: [
          { source: "x1", target: "x2" },
          { source: "x2", target: "x3" },
          { 
            source: "x3",
            target: "x4",
            overlays: [
              ["Label", {
                  label: "通过",
                  location: 0.5
              }]
            ]
          },
          { 
            source: "x3",
            target: "x5",
            overlays:[
              [
                "Label", {
                  label: "驳回",
                  location: 0.5
                }
              ]
            ]
          },
        ],
        nodes: [
          {
            id: "x1",
            label: "采购申请",
            type: ""
          },
          {
            id: "x2",
            label: "采购部审批",
            type: ""
          },
          {
            id: "x3",
            label: "审批",
            type: "getway"
          },
          {
            id: "x4",
            label: "已通过",
            type: ""
          },
          {
            id: "x5",
            label: "已驳回",
            type: ""
          },
        ],
      },
    });

    let saveprocess = () => {};
    let nodeclick = (node) => {
      console.log("node click @", node);
    };
    let auto_layout = () => {
      let tree = utils.relation2tree(state.flowItem.nodes, state.flowItem.edges);
      tree = {id: "root", children: tree}
      let d3AutoLayout = D3.tree().nodeSize([60, 180]);
      let d3_data = D3.hierarchy(tree);
      let dot_layout = d3AutoLayout(d3_data);
      let positions = {};
      dot_layout.descendants().forEach((item, index) => {
        positions[item.data.id] = {
          x: item.y + 10,
          y: item.x + 60 + 30,
        };
      });
      for (let prop in positions) {
        state.flowItem.nodes.forEach((item) => {
          item.x = positions[prop].x;
          item.y = positions[prop].y;
        });
      }
      state.flowItem.nodes.forEach((item) => {
        item.x = positions[item.id].x;
        item.y = positions[item.id].y;
      });
    };

    onMounted(() => {
      auto_layout();
    });
    return {
      ...toRefs(state),
      saveprocess,
      nodeclick,
    };
  },
});
</script>
